<template>
  <header class="s-header">
    <div class="header-box">
      <div class="logo">创新创业学院</div>
      <el-menu :default-active="activeIndex" mode="horizontal" class="menu" active-text-color="#2E8DF6" :router="true">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">创客集市</template>
          <el-menu-item index="/project">创客项目</el-menu-item>
          <el-menu-item index="/teacher">优秀导师</el-menu-item>
          <el-menu-item index="/customer">优秀创客</el-menu-item>
          <el-menu-item index="/investor">投资人</el-menu-item>
          <el-menu-item index="/investment_institutions">投资机构</el-menu-item>
          <el-menu-item index="/service">服务机构</el-menu-item>
          <!-- <el-menu-item index="/projectFruit">成果展示</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">创客沙龙</template>
          <el-menu-item index="/match">校园大赛</el-menu-item>
          <el-menu-item index="/activity">双创活动</el-menu-item>
          <el-menu-item index="/information">创客资讯</el-menu-item>

        </el-submenu>
        <el-submenu index="4">
          <template slot="title">特色班</template>
          <el-menu-item index="/knowledge">通识课程</el-menu-item>
          <el-menu-item index="/curriculum">特色课程</el-menu-item>
          <el-menu-item index="/classmatch">课堂比赛</el-menu-item>
        </el-submenu>
        <el-menu-item index="/new">政策解读</el-menu-item>
        <el-menu-item index="/download">下载中心</el-menu-item>
      </el-menu>
      <div class="search-box">
        <el-input size="mini" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
      <div class="user-box">
        <div class="not-login" v-if="!isLogin">
          <div class="text">登陆</div>
          <div class="line"></div>
          <div class="text">注册</div>
        </div>
        <div class="is-login" v-else>
          <img class="user-hearder" :src="require('@/assets/logo.png')" alt="">
          <span class="user-id">用户ID</span>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data () {
    return {
      activeIndex: '1',
      search: '',
      isLogin: true
    }
  }
}
</script>

<style lang="scss" scoped>
.s-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  background: #fff !important;
  .header-box {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    .logo {
      font-size: 24px;
      font-weight: bold;
      color: rgba(13, 26, 50, 1);
    }
    /deep/ .menu {
      border: none;
      display: flex;
      align-items: center;

      font-weight: 900;
      .el-menu-item.is-active {
        border-bottom-color: transparent !important;
      }
      .el-menu-item {
        display: flex;
        height: auto;
        line-height: unset;
        color: #333;
      }
      .el-submenu.is-active {
        .el-submenu__title {
          border-bottom-color: transparent !important;
        }
      }
      .el-submenu {
        display: flex;
        .el-submenu__title {
          height: auto;
          line-height: unset;
          color: #333;
        }
      }
    }
    .search-box {
      display: flex;
      align-items: center;
      /deep/ .el-input__inner {
        border-radius: 12px;
        height: 21px;
        line-height: 21px;
      }
      /deep/ .el-icon-search {
        line-height: 21px;
      }
    }
    .user-box {
      display: flex;
      justify-content: center;
      align-items: center;
      .not-login {
        display: flex;
        font-size: 16px;
        font-weight: 400;
        color: rgba(46, 141, 246, 1);
        .line {
          width: 1px;
          height: 21px;
          margin: 0 12px;
          background-color: #dcdbdb;
        }
      }
      .is-login {
        display: flex;
        align-items: center;
        .user-hearder {
          width: 28px;
          height: 28px;
          border-radius: 50%;
        }
        .user-id {
          margin-left: 4px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(104, 115, 136, 1);
        }
      }
    }
  }
}
</style>
